<template>
  <div class="operation-bar">
    <div class="left">
      <el-input
        v-model="searchKeyword"
        class="search-input"
        clearable
        placeholder="搜索用户"
        @clear="handleSearch"
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon><search /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="right">
      <el-button type="primary" @click="handleConfirm">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'

const emit = defineEmits(['search', 'confirm', 'cancel'])

const searchKeyword = ref('')

const handleSearch = () => {
  emit('search', searchKeyword.value)
}

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.operation-bar {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
}

.search-input {
  width: 300px;
}
</style>
